﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>AI分析</title>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/css.css">
</head>
<style type="text/css">
body {background-color: #F3F3F3;width: 100%;height: 100vh;overflow-x: hidden;}
.header{background-color: #fff;padding: 15px 20px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
.header_left{width: 60%;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}
.header_right{width: 40%;text-align: right;}
.header img{width: 22px;height: 22px;padding-left: 5px;}
.content{background-color: #fff;}
.taps{margin-top: 5px;padding-bottom: 15px;border-bottom: 1px solid #E2E2E2;}
.navbar{text-align: center;background-color: #fff;margin-top: 15px;padding: 15px 0 0 0;}
.active_navbar{color: #FE7B03;border-bottom: 2px solid #FE7B03;padding-bottom: 10px;display: inline-block;width: 50%;}
.actived_item{border:1px solid  #E2E2E2;color: #8A8A8A;width:80%;margin-left: auto;margin-right: auto;border-radius: 2px; }
.active_item{border:1px solid #FE7B03;color: #FE7B03;}
.department{width: 50%;display: inline-block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.tappatrment{padding: 5px 5px;color: #FE7B03;border: 1px solid #FE7B03;}
.user_box{border-bottom: 1px solid #ddd; width: 95%;padding: 20px 0;display: flex;justify-content: flex-start;align-items: center;float: right;}
.logo{width: 25px;height: 20px;margin-right: 5px;}
.user_img{border-radius: 50%;width: 45px;height: 45px;}
.username{margin-left: 10px;margin-top: -5px;}
.clear{clear: both;}
.box{background-color: #fff;margin-top: 15px;}
.item_two_content{width: 93%;margin-left: auto;margin-right: auto;display: flex;justify-content: center;align-items: center;}
.user_box_two{width: 50%;padding: 20px 0;display: flex;justify-content: center;align-items: center;}
.user_box_three{width: 33.3%;padding: 20px 0;display: flex;justify-content: center;align-items: center;}
.loadmore{text-align: center;padding:30px 0;}
.loadmore img{width: 25px;height: 25px;}
.loadmore span{padding-left: 10px;}
</style>

<body>
    <div class="container">
        <div class="header f16">
            <div class="header_left">
                当前查看:
                <span class="department"></span>
            </div>
            <div class="header_right">
                <span class="tappatrment f14">切换部门</span>
                <img src="../images/boss/15.png">
            </div>
        </div>
        <div class="content">
            <div class="weui-flex navbar">
                <div class="weui-flex__item" onclick="toUrl('bossRadar.html')">
                    <div class="placeholder">总览</div>
                </div>
                <div class="weui-flex__item" onclick="toUrl('rankingList.html')">
                    <div class="placeholder">销售排行</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder active_navbar">AI分析</div>
                </div>
            </div>
            <div class="user_box">
                <img class="logo" src="../images/boss/33.png" alt="">
                <img class="user_img" src="../images/boss/timg.jpg" alt="">
                <div class="username">
                    <h4 class="weui-media-box__title">古力娜扎</h4>
                    <p class="weui-media-box__desc">首席体验馆</p>
                </div>
            </div>
            <div class="clear"></div>
            <di>
                <div id="main1" style="width: 90%;height:220px;margin-left: auto;margin-right: auto;"></div>
            </di>
        </div>
        <div class="box">
            <div class="item_two_content">
                <div class="user_box_two">
                    <img class="logo" src="../images/boss/3.png" alt="">
                    <img class="user_img" src="../images/boss/timg.jpg" alt="">
                    <div class="username">
                        <h4 class="weui-media-box__title">古力娜扎</h4>
                        <p class="weui-media-box__desc">首席体验馆</p>
                    </div>
                </div>
                <div class="user_box_two">
                    <img class="logo" src="../images/boss/2.png" alt="">
                    <img class="user_img" src="../images/boss/timg.jpg" alt="">
                    <div class="username">
                        <h4 class="weui-media-box__title">古力娜扎</h4>
                        <p class="weui-media-box__desc">首席体验馆</p>
                    </div>
                </div>
            </div>
            <di>
                <div id="main2" style="width: 90%;height:220px;margin-left: auto;margin-right: auto;"></div>
            </di>
        </div>
        <div class="box">
            <div class="item_two_content">
                <div class="user_box_three">
                    <div class="username">
                        <h4 class="weui-media-box__title">古力娜扎</h4>
                        <p class="weui-media-box__desc">首席体验馆</p>
                    </div>
                </div>
                <div class="user_box_three">
                    <div class="username">
                        <h4 class="weui-media-box__title">古力娜扎</h4>
                        <p class="weui-media-box__desc">首席体验馆</p>
                    </div>
                </div>
                <div class="user_box_three">
                    <div class="username">
                        <h4 class="weui-media-box__title">古力娜扎</h4>
                        <p class="weui-media-box__desc">首席体验馆</p>
                    </div>
                </div>
            </div>
            <di>
                <div id="main3" style="width: 90%;height:70px;margin-left: auto;margin-right: auto;"></div>
            </di>
            <div class="item_two_content">
                <div class="user_box_three">
                    <div class="username">
                        <h4 class="weui-media-box__title">古力娜扎</h4>
                        <p class="weui-media-box__desc">首席体验馆</p>
                    </div>
                </div>
                <div class="user_box_three">
                    <div class="username">
                        <h4 class="weui-media-box__title">古力娜扎</h4>
                        <p class="weui-media-box__desc">首席体验馆</p>
                    </div>
                </div>
                <div class="user_box_three">
                    <div class="username">
                        <h4 class="weui-media-box__title">古力娜扎</h4>
                        <p class="weui-media-box__desc">首席体验馆</p>
                    </div>
                </div>
            </div>
            <di>
                <div id="main4" style="width: 90%;height:70px;margin-left: auto;margin-right: auto;"></div>
            </di>
            <div class="loadmore">
                <img src="" alt=""><span>没有更多数据</span>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../plugins/echarts/js/echarts.js"></script>
<script type="text/javascript">
    $(function () {
        loadDepartment();   //显示部门
        loadData();
        loadChartTop();
        loadChart();
        loadBtn();
    })

    //加载部门
    function loadDepartment() {
        var department = getQueryString("name") == "" ? "多个部门" : getQueryString("name");
        $(".department").html(department);
    }
 
    //加载AI数据
    function loadData() {
        ajaxGet(siteApiList.GetAnalysisByStaff + "?staffid=" + staffId, function (data) {
            if (!isJsonSuccess(data))
                return;
            var actionList = data.Data.ActionRecordList;    //操作轨迹列表
            var staffList = data.Data.StaffList;            //员工列表
            var sortList = new Array();

            actionList = getSortData(actionList);           //原始数组排序(按actiontype 从小到大排序)
            //循环每个员工，拼接员工数据
            for (var i = 0; i < staffList.length; i++) {
                var staff = staffList[i];
                var staffData = getStaffData(actionList, staff);
                sortList.push(staffData);
            }

            //对拼接好的数据，排序
            for (var i = 0; i < sortList.length; i++) {
                for (var j = i + 1; j < sortList.length; j++) {
                    if (sortList[i].max > sortList[j].max) {
                        var temp = sortList[i];
                        sortList[i] = sortList[j];
                        sortList[j] = temp;
                    }
                }
            }
            
            for (var i = 0; i < sortList.length; i++) {

                //这里绑定图表...

            }

        });
    }

    //原始数据排序（从小到大排序）
    function getSortData(list) {
        for (var i = 0; i < list.length; i++) {
            for (var j = i + 1; j < list.length; j++) {
                if (list[i].actionType > list[j].actionType) {
                    var temp = list[i];
                    list[i] = list[j];
                    list[j] = temp;
                }
            }
        }
        return list;
    }

    //从原始数据中，筛选出每个员工的雷达数据
    function getStaffData(list, staffInfo) {
        var max = 0;                //雷达数据最大值
        var yData = new Array();    //Y轴数据
        var xData = [0, 1, 4, 4, 14, 15, 18];   //类型 0 查看商品(产品推广值), 1 查看官网(官网推广度), 4 查看名片(个人魅力值), 14 添加客户(获客能力值), 15 跟进客户(销售主动性), 18 客户互动(客户互动值) 
        var _staffid = staffInfo.staffid;

        for (var i = 0; i < xData.length; i++) {
            var total = 0;
            var actionType = xData[i];
            for (var j = 0; j < list.length; j++) {
                var item = list[j];
                //同一员工
                if (item.StaffId == _staffid) {
                    //同一类型
                    if (actionType == item.actionType) {
                        total = item.Total;
                        if (total > max)
                            max = total;
                        break;
                    }
                }
            }
            yData.push(total);
        }
        //拼接数据
        var staff = {
            max: max,
            value: yData,
            name: staffInfo.name,
            position: staffInfo.position,
            avater: siteConfig.formatAvater(staffInfo.avater)
        };
        console.log(staff)
        return staff;
    }

    //$(window).resize(function() {//图表自适应
    //    myChart1.resize();
    //    myChart2.resize();
    //    myChart3.resize();
    //    myChart4.resize();
    //});


    function loadChartTop() {

        option1 = {
            title: {
                text: ''
            },
            radar: [
                {
                    indicator: [
                        { text: '个人魅力值', max: 80 },
                        { text: '获客能力值', max: 80 },
                        { text: '销售主动性', max: 80 },
                        { text: '官网推广度', max: 80 },
                        { text: '产品推广值', max: 80 },
                        { text: '客户互动性', max: 180 }
                    ],
                    center: ['50%', '50%'],
                    radius: 80,
                    startAngle: 60,
                    name: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#FEB066'
                        }
                    },
                    splitLine: { //梯形刻度线
                        lineStyle: {
                            color: ['#FEB066', '#ddd', '#ddd', '#ddd', '#ddd']
                        }
                    },
                    splitArea: { //刻度区域
                        areaStyle: {
                            color: ["#fff"]
                        }
                    },
                    axisLine: { //交叉刻度线
                        lineStyle: {
                            color: "#ddd"
                        }
                    }
                }
            ],
            series: [
                {
                    name: '雷达图',
                    type: 'radar',
                    symbol: "none",    //是否显示小圆点
                    color: ["#FED69B"],//数据区域边框颜色
                    data: [
                        {
                            value: [180, 80, 70, 80, 80, 10],
                            name: '',
                            areaStyle: {
                                normal: {
                                    opacity: 0.9,
                                    color: new echarts.graphic.RadialGradient(1, 0.5, 1, [
                                            {
                                                color: '#FFD8A2',
                                                offset: 0
                                            },
                                            {
                                                color: '#FFAD61',
                                                offset: 1
                                            }
                                    ])
                                }
                            }
                        }
                    ]
                }
            ]
        }
        var myChart1 = echarts.init(document.getElementById('main1'));
        myChart1.setOption(option1);
        
    }

    function loadChart() {

        option2 = {
            title: { text: '' },
            radar: [
                {
                    indicator: [
                        { text: '', max: 60 },
                        { text: '', max: 60 },
                        { text: '', max: 60 },
                        { text: '', max: 60 },
                        { text: '', max: 60 },
                        { text: '', max: 60 }
                    ],
                    center: ['25%', '50%'],
                    radius: 60,
                    startAngle: 60,
                    name: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#FEB066'
                        }
                    },
                    splitLine: { //梯形刻度线
                        lineStyle: {
                            color: ['#ddd', '#ddd', '#ddd', '#ddd', '#ddd']
                        }
                    },
                    splitArea: { //刻度区域
                        areaStyle: {
                            color: ["#fff"]
                        }
                    },
                    axisLine: { //交叉刻度线
                        lineStyle: {
                            color: "#ddd"
                        }
                    }
                },
                {
                    indicator: [
                        { text: '', max: 60 },
                        { text: '', max: 60 },
                        { text: '', max: 60 },
                        { text: '', max: 60 },
                        { text: '', max: 60 },
                        { text: '', max: 60 }
                    ],
                    center: ['75%', '50%'],
                    radius: 60,
                    startAngle: 60,
                    name: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#FEB066'
                        }
                    },
                    splitLine: { //梯形刻度线
                        lineStyle: {
                            color: ['#ddd', '#ddd', '#ddd', '#ddd', '#ddd']
                        }
                    },
                    splitArea: { //刻度区域
                        areaStyle: {
                            color: ["#fff"]
                        }
                    },
                    axisLine: { //交叉刻度线
                        lineStyle: {
                            color: "#ddd"
                        }
                    }
                }
            ],
            series: [
                {
                    name: '雷达图',
                    type: 'radar',
                    symbol: "none",    //是否显示小圆点
                    color: ["#FED69B"],//数据区域边框颜色
                    data: [
                        {
                            value: [10, 40, 20, 40, 40, 50],
                            name: '',
                            radarIndex: 0,
                            areaStyle: {
                                normal: {
                                    opacity: 0.9,
                                    color: new echarts.graphic.RadialGradient(1, 0.5, 1, [
                                            {
                                                color: '#FFD8A2',
                                                offset: 0
                                            },
                                            {
                                                color: '#FFAD61',
                                                offset: 1
                                            }
                                    ])
                                }
                            }
                        }
                    ]
                }
            ]
        }

        var myChart2 = echarts.init(document.getElementById('main2'));
        myChart2.setOption(option2);
    }
    
    function loadChart3() {

        option3 = {
            title: {
                text: ''
            },
            radar: [
                {
                    indicator: [
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 }
                    ],
                    center: ['15%', '50%'],//位置
                    radius: 30,
                    startAngle: 60,
                    name: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#FEB066'
                        }
                    },
                    splitLine: { //梯形刻度线
                        lineStyle: {
                            color: ['#ddd', '#ddd', '#ddd', '#ddd', '#ddd']
                        }
                    },
                    splitArea: { //刻度区域
                        areaStyle: {
                            color: ["#fff"]
                        }
                    },
                    axisLine: { //交叉刻度线
                        lineStyle: {
                            color: "#ddd"
                        }
                    }
                },
                {
                    indicator: [
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 }
                    ],
                    center: ['50%', '50%'],
                    radius: 30,
                    startAngle: 60,
                    name: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#FEB066'
                        }
                    },
                    splitLine: { //梯形刻度线
                        lineStyle: {
                            color: ['#ddd', '#ddd', '#ddd', '#ddd', '#ddd']
                        }
                    },
                    splitArea: { //刻度区域
                        areaStyle: {
                            color: ["#fff"]
                        }
                    },
                    axisLine: { //交叉刻度线
                        lineStyle: {
                            color: "#ddd"
                        }
                    }
                },
                {
                    indicator: [
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 },
                        { text: '', max: 30 }
                    ],
                    center: ['85%', '50%'],
                    radius: 30,
                    startAngle: 60,
                    name: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#FEB066'
                        }
                    },
                    splitLine: { //梯形刻度线
                        lineStyle: {
                            color: ['#ddd', '#ddd', '#ddd', '#ddd', '#ddd']
                        }
                    },
                    splitArea: { //刻度区域
                        areaStyle: {
                            color: ["#fff"]
                        }
                    },
                    axisLine: { //交叉刻度线
                        lineStyle: {
                            color: "#ddd"
                        }
                    }
                }
            ],
            series: [
                {
                    name: '雷达图',
                    type: 'radar',
                    symbol: "none",    //是否显示小圆点
                    color: ["#FED69B"],//数据区域边框颜色
                    data: [
                        {
                            value: [30, 30, 20, 30, 30, 30],
                            name: '',
                            radarIndex: 0,
                            areaStyle: {
                                normal: {
                                    opacity: 0.9,
                                    color: new echarts.graphic.RadialGradient(1, 0.5, 1, [
                                            {
                                                color: '#FFD8A2',
                                                offset: 0
                                            },
                                            {
                                                color: '#FFAD61',
                                                offset: 1
                                            }
                                    ])
                                }
                            }
                        }
                    ]
                },
                {
                    name: '雷达图',
                    type: 'radar',
                    symbol: "none",    //是否显示小圆点
                    color: ["#FED69B"],//数据区域边框颜色
                    radarIndex: 1,
                    data: [
                        {
                            value: [30, 30, 30, 30, 30, 20],
                            name: '',
                            areaStyle: {
                                normal: {
                                    opacity: 0.9,
                                    color: new echarts.graphic.RadialGradient(1, 0.5, 1, [
                                            {
                                                color: '#FFD8A2',
                                                offset: 0
                                            },
                                            {
                                                color: '#FFAD61',
                                                offset: 1
                                            }
                                    ])
                                }
                            }
                        }
                    ]
                },
                {
                    name: '雷达图',
                    type: 'radar',
                    symbol: "none",    //是否显示小圆点
                    color: ["#FED69B"],//数据区域边框颜色
                    radarIndex: 2,
                    data: [
                        {
                            value: [30, 30, 30, 30, 30, 20],
                            name: '',
                            areaStyle: {
                                normal: {
                                    opacity: 0.9,
                                    color: new echarts.graphic.RadialGradient(1, 0.5, 1, [
                                            {
                                                color: '#FFD8A2',
                                                offset: 0
                                            },
                                            {
                                                color: '#FFAD61',
                                                offset: 1
                                            }
                                    ])
                                }
                            }
                        }
                    ]
                }
            ]
        }

        var myChart3 = echarts.init(document.getElementById('main3'));
        myChart3.setOption(option3);
    }

    function loadChart4() {
        var myChart4 = echarts.init(document.getElementById('main4'));
        myChart4.setOption(option3);
    }

    function loadBtn() {
        //切换部门
        $(".tappatrment").click(function () { toUrl("selectDepartment.html?backurl=" + encodeURIComponent("aiAnalysis.html?")) });
    }
</script>
</html>